@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
	
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;}

a{text-decoration:none;}

header{
	margin:0;
	padding:0;
	width:100%;
	position:absolute;
	z-index:200}



@font-face{
	font-family:alagreya; src:url(Font/alegreya/Alegreya-Regular.ttf);}
@font-face{
	font-family:opensans; src:url(Font/opensans/OpenSans-Regular.ttf);}
	



/* police - paragraphe */	

h1{font-size:30px;color:#182522; font-family:alagreya; text-transform: uppercase; word-spacing: 5px; line-height:35px} 
h2{font-size:20px;color:#AFC8B5; font-family:alagreya; text-transform: uppercase; text-align:center}
 

	

/* code */
body {
  margin:0;
  padding:0;
  background-color:#AFC8B5;
  height:100%}
  
	
/* header-menu hambuger */

nav{padding:10px;  
	background-color:rgba(175, 200 ,181, 0.5);
	display:flex;
	align-items:center;
	justify-content:center}

	
#main-menu{
  display:flex;
  -moz- display: flex;
  -ms- display: flex;
  -o- display: flex;
  -webkit- display: flex;
  justify-content:space-around;
  align-items:center;
  flex:2 1 300px ;
  }


#main-menu a{
  font-size:20px;
  font-weight:600;
  letter-spacing:0.2px;
  color:#182522; 
  font-family:opensans;
  border-bottom: 3px solid transparent;}
  
#main-menu a:hover{
  
  border-bottom: 3px solid #EF8124; 
  transition: 0.2s; 
}



.wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width:100%;
  align-items:center;
  
  
  
  
}


ul{
  
  display: flex;
  flex-wrap: wrap;
  box-sizing:border-box

}
#logo{
  align-items:center;
 justify-content:center;
 flex:1 1 40px;
 
}
 
 #logo img{
  max-width:100%;
  height:auto}
 
 
   
 #menu{
	 display:flex;
	 justify-content:space-around;
  	 align-items:center;
	 flex:3 1 200px;
	 
}
	 

#main-menu li{
	display:flex;
	
}
  



.responsive-button{
	display:none}




/* ############################################ */
@media screen and (max-width: 980px){
  
  .wrapper, ul{
    display: flex;
    text-align: center;
	align-items:stretch;
	width:100%
  }

  ul{
    padding: 0px ;
  }

  nav{
    padding:0;}

  #logo{padding:10px}

  #logo img{
	  max-width:100%;
	  height:auto}
	  

  .responsive-button{
  	display:flex;
	align-items:center;
	justify-content: center;
	
	
	}
 /* menu overlay full width */ 
 
#menu{
	
  background-color: rgba(24, 37 ,34, 0.9);
  height: 100%;
   flex-direction:column;
   align-items:center;
    opacity: 0;
  position: fixed;
   transition: all 0.7s ease-in-out;
  visibility: hidden;
  width: 100%;
  z-index: 1100;
  overflow:hidden;
}

	
#main-menu{
	 flex-direction:column;
	 justify-content:center;
	 flex:3
	  }
#main-menu a{
  color:#AFC8B5; 
  }

#menu.open {
  opacity: 1;
  visibility: visible;
}
.noscroll{
	overflow:hidden} 

#main-menu li {
 	padding:10px

}

.book-now{
	height:20vh;
	}

}

@media screen and (max-height: 320px){

 #menu{
flex-direction:row
}

.book-now{
	margin-right:20px;
	}

#main-menu{
	 flex-direction:column;
	 justify-content:center;
	 flex:1
	 
	  }
}





/* menu hamburger */
.toggle-menu {
  background-color: transparent;
  border: none;
  cursor: pointer;
  
  height: 50px;
  outline: none;
  padding: 0;
  
  position: relative;
  
  width: 50px;
  z-index: 1110;
}
.toggle-menu span {
  background-color: #182522;
  content: "";
  display: block;
  height: 2px;
  left: calc(50% - 13px );
  position: absolute;
  top: calc(50% - 1px );
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;
  transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear;
  transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear, -webkit-transform 0.2s linear;
  width: 26px;
}
.toggle-menu span:before, .toggle-menu span:after {
  background-color: #182522;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  -webkit-transform 0.2s linear;
  transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear;
  transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out,  transform 0.2s linear, -webkit-transform 0.2s linear;
  width: 26px;
}
.toggle-menu span:before {
  top: 7px;
}
.toggle-menu span:after {
  top: -7px;
}
.toggle-menu.active span {
  background-color: transparent;
  transition: background 0.2s ease-out;
}
.toggle-menu.active span:before, .toggle-menu.active span:after {
  transition: top 0.2s ease-out, -webkit-transform 0.2s 0.2s ease-out;
  transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out;
  transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out, -webkit-transform 0.2s 0.2s ease-out;
  background-color:#AFC8B5
}
.toggle-menu.active span:before {
  top: 0;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
          transform: rotate3d(0, 0, 1, -45deg);
}
.toggle-menu.active span:after {
  top: 0;
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
          transform: rotate3d(0, 0, 1, 45deg);
}


/* book now */

.book-now {
	
  display: flex;
  flex-direction: column;
  flex-wrap:wrap;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  border-radius:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  -o-border-radius:10px;  
   -ms-border-radius:10px;}
  /* animation: bounce 2s infinite;
	-webkit-animation: bounce 2s infinite;
	-moz-animation: bounce 2s infinite;
	-o-animation: bounce 2s infinite;

/* book now BOUNCE  
@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	
	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}*/ 

  

.button {
  background-color: #256834;
  position: relative;
  -webkit-perspective: 1000;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0); 
  padding:10px 20px 10px 20px;
  transition: 0.3s ease-in-out;
  text-align:center;
  font-size:18px;
  color:#D7E3DA; 
  border: 2px solid transparent;
  font-family:opensans;
   border-radius:10px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  -o-border-radius:10px;
  -ms-border-radius:10px;
   width:180px
}

  
.button span {
  position: absolute;
  font-size:18px;
  color:#D7E3DA; 
  font-family:opensans;
  top: 10px;
  left: 10px;
  right:10px;
  opacity: 0;
  transition: all 0s ease 0s;
 
  
}
.button:hover {
  transition: 0.3s ease-in-out;
  border: 2px solid #EF8124;
  color:transparent
}
.button:hover > span {
  opacity: 1;
  transition: all 0.25s ease-in-out 0.1s;
}
.button:hover:before {
  transition: 0.3s ease-in-out;
  
}

/* paralax-contenu principale */

.maincontent{
	margin:0 auto;
	height: 100%;
	background-color:#AFC8B5
}

article .text, .text{
  width: 100%;
  margin:0;
  text-align: center;
  word-spacing: 5px;
  line-height: 25px;
  
}

.text p{
  margin:0 auto;
  text-align:justify;
  font-size:20px;
  color:#182522; 
  font-family:opensans; 
  max-width:980px;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
	box-sizing: border-box;
	padding:20px;
  }

.img {
	width:100%;
    height:60vh; 
	display: flex;
  flex-direction: column;
  justify-content:flex-end;
  align-items:center;
  text-align:center
}
.img:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 10em;
    
   background-image: -moz-linear-gradient(
        rgba(175,200,181, 0) 1%,
        rgba(175,200,181, 1) 100%
    );
  background: -webkit-linear-gradient(to bottom,
        rgba(175,200,181, 0) 1%,
        rgba(175,200,181, 1) 100%
    ); 
    background-image: -o-linear-gradient(
       rgba(175,200,181, 0) 1%,
        rgba(175,200,181, 1) 100%
    );
    background-image: linear-gradient(
        rgba(175,200,181, 0) 1%,
        rgba(175,200,181, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(175,200,181, 0) 1%,
        rgba(175,200,181, 1) 100%
    );
}

.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	display:flex;
	align-items:center
}

/* ie fix*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.img {
background: scroll no-repeat center center;
}
}

/* edge fix*/
@supports (-ms-ime-align:auto) 

.img {
background: fixed no-repeat center center;
}
}



@media screen and (-webkit-min-device-pixel-ratio:0) {
  .parallax__container {
    clip: auto;
    -webkit-mask-image: -webkit-linear-gradient(top, #fff 0%, #fff 100%)
  }
}

.parallax {
	position: fixed;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;
	

	/* BG behaviour */
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    
}

.slider-image { 
  width: 100%; 
  height:100vh; 
  object-fit: cover;
 }
	
.services{
	display:flex;
	flex-wrap:wrap;
	max-width:980px;
	margin:0 auto;	
	}


.services1, .services2{
	flex-flow:column;
	font-size:20px;
    color:#182522; 
    font-family:opensans;
	width:100%
}
	
.services1 li, .services2 li{
	padding:10px;
	text-align:justify;
	
}


.moretext_a, .moretext_b, .moretext_c, .moretext_night{
	display:none;
	width:100%;
	
	}

.moretext_btn_a, .moretext_btn_b, .moretext_btn_c, .moretext_btn_services_night{
	color:#EF8124;
	font-size:16px;
	opacity:0.8}

.moretext_btn_a:hover{
	opacity:1;
	text-decoration:underline}
.moretext_btn_b:hover{
	opacity:1;
	text-decoration:underline}
.moretext_btn_c:hover{
	opacity:1;
	text-decoration:underline}
.moretext_btn_services_night:hover{
	opacity:1;
	text-decoration:underline}


.option_A{
	height:50vh;
	border:solid 3px #182522;
	width:350px;
	background-color:#D7E3DA;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	-o-box-shadow:0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
  -webkit-box-shadow:0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
   -moz-box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4) 
}
.option_B{
	height:50vh;
	border:solid 3px #182522;
	width:350px;
	background-color:#D7E3DA;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	-o-box-shadow:0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
  -webkit-box-shadow:0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
   -moz-box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4)
}
.option_C{
	height:50vh;
	border:solid 3px #182522;
	width:350px;
	background-color:#D7E3DA;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	-o-box-shadow:0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
  -webkit-box-shadow:0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
   -moz-box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4)
	
}

.moretext_services_night{
	display:flex;
	flex-wrap:wrap;
	max-width:100%;	
	justify-content:space-around;
	padding:10px;
	
	}
	
.moretext_activity{
	display:flex;
	flex-wrap:wrap;
	max-width:100%;	
	justify-content:space-around;
	padding:10px;
	}
	
.moretext_car{
	display:flex;
	flex-wrap:wrap;
	max-width:100%;	
	justify-content:space-around;
	padding:10px;
	
	}
	
.moretext_breakfast{
	display:flex;
	flex-wrap:wrap;
	max-width:100%;	
	justify-content:space-around;
	padding:10px;
	}


/* bouton bottom-up */

#scroll {
     position:fixed;
    right:6px;
    bottom:6px;
	display:flex;
	justify-content:center;
	align-items:center;
	 border-radius:50%;
  -webkit-border-radius50%;
  -moz-border-radius:50%;
  -o-border-radius:50%;
  -ms-border-radius:50%;
	height:30px;
	width:30px;
	cursor:pointer;
	z-index:999;
	overflow:hidden;
	background-color:#256834;
	
}
	
#scroll i {
    color:#D7E3DA;
    font-size: 30px;
    
}
#scroll i:hover {
    color:#EF8124}

/* réseaux sociaux */

.youtube{
	width:25px;
	height:25px;
	display:flex;
	justify-content:center;
	align-items:center;
	-webkit-border-radius: 9px;
    -moz-border-radius: 9px;
	-ms-border-radius: 9px;
	-o-border-radius: 9px;
    border-radius: 9px;	
	}	


.youtube:hover{
	background-color:#FF0000;
	}
	
.facebook{
	display:flex;
	width:25px;
	height:25px;
	justify-content:center;
	align-items:center;
	-webkit-border-radius: 9px;
    -moz-border-radius: 9px;
	-ms-border-radius: 9px;
	-o-border-radius: 9px;
    border-radius: 9px;
	}			
	
.facebook:hover{
	background-color:#3b5998;
	}
	

.instagram{
	display:flex;
	width:25px;
	height:25px;
	justify-content:center;
	align-items:center;
	-webkit-border-radius: 9px;
    -moz-border-radius: 9px;
	-ms-border-radius: 9px;
	-o-border-radius: 9px;
    border-radius: 9px;
	}	
	
.instagram:hover{
	 background:url(Images/fondinstagram.jpg)
	}	


/* sosmed & lang */

.footer-sosmed-lang{
	flex:1 2 300px;
	margin-top:10px;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-flow:column;}

.btn-lang{
	color:#EF8124;
	}

 .lang {
  width: 140px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  position:relative;
  font-family:opensans;

}

.footer-lang h2 {
	opacity:0.5}
	
.lang li{
	padding:5px}
	
.lang a{
	opacity:0.5}


.lang a:hover {
  font-size: 0;
  line-height: 0;
  opacity:1 
  
}

.lang li a:hover:before {
  content: attr(data-hover);
  font-size:16px;
  line-height: 20px;
  color:#EF8124;
}
 

/* ---------------------------------------------------------*/
.sosmed {
  width: 140px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  position:relative;
  }
  
.sosmed li{
	padding:5px}
  
.footer-sosmed h2{
	opacity:0.5}
	
.sosmed a{
	opacity:0.5}


.sosmed a:hover {
  opacity:1 
  
}

	
/* map */

	


/* footer */

.footercontenu{
	background:#182522;
    display: flex;
    flex-flow: column nowrap;
		
}

/* image important*/	
.important{
	display:flex;
	justify-content:space-around;
	align-items:center;
	padding:10px;
	width:100%
	}
	
.important li{
	flex:0 1 298px;
	}
.footer-important{
	display:flex;
	justify-content:space-around;
	width:100%
	}
 
.footer-important img{
	vertical-align:middle;
	margin:10px;
	box-sizing: border-box;
	}
	
/* footer information:contact + paiement*/

.footer-info{
	display:flex;
	justify-content:space-around;
	box-sizing: border-box;
	align-items:baseline;
	flex-wrap:wrap;
	font-size:16px;
	font-family:opensans;
	}

/* nous contacter*/

.footer-contact{
	opacity:0.5;
	flex:1 2 300px;
	margin-top:10px;}
	
	
.footer-contact ul{
	display:flex;
	flex-flow: column;
	justify-content:space-around;
	align-items:center;
}

.footer-contact span{
	vertical-align:middle;}

.footer-contact li{
	padding:5px}

		
.footer-contact img{
	vertical-align:middle;
	margin-left:3px;
	margin-right:3px
	}
	

/* partenaires*/
.footer-partners{
	flex:1 2 300px;
	margin-top:10px;
	}
	
.footer-partners h2{
	opacity:0.5;}
	
.footer-partners ul{
	display:flex;
	flex-flow: column;
	justify-content:space-around;
	align-items:center;
}
.footer-partners span{
	font-size:18px}

.footer-partners li{
	padding:5px;
	}
	
.footer-partners a{
	opacity:0.5;}

.footer-partners a:hover{
	opacity:1
	}


.copyright{
	text-align:center;
	padding:10px; 
	
}